import { Col, Row, Drawer } from 'antd';
import GGEditor, { Flow, RegisterNode } from '@/components/GGEditor';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import React, { useState, useRef, useEffect } from 'react';
import EditorMinimap from './components/EditorMinimap';
import { FlowContextMenu } from './components/EditorContextMenu';
import { FlowDetailPanel } from './components/EditorDetailPanel';
import { FlowItemPanel } from './components/EditorItemPanel';
import { FlowToolbar } from './components/EditorToolbar';
import styles from './index.less';
import { useFullscreen } from '@umijs/hooks';
import classnames from 'classnames';
import Connect from '@/components/Connect';
import useModel from './useModel';
import MessageList from './components/messageList';
import IconFont from '@/components/IconFont';
import Toolbar from '@/components/Toolbar';
import EmptyCenter from '@/components/EmptyCenter';

GGEditor.setTrackable(false);
const EntryPage = props => {
  const {
    state: { flowRowData, flowListVisible, isAddMode },
    customProps,
    setState,
    getFtpFileType,
    save,
    fnProps,
  } = useModel(model => [
    model.state.flowRowData,
    model.state.flowListVisible,
    model.state.isAddMode,
  ]);
  const {} = props;
  useEffect(() => {
    if (localStorage.getItem('deviceType')) {
      customProps.run({ fsuTypeId: JSON.parse(localStorage.getItem('deviceType'))?.id });
      fnProps.run();
      getFtpFileType();
    }
  }, []);

  const { ref, ...rest } = useFullscreen();

  const flowRef = useRef();
  const handleSave = fields => {
    const flowSaveData = flowRef.current.graph.save();
    save(flowRowData, fields, flowSaveData);
  };
  const drawerChange = visible => {
    setState({ flowListVisible: visible });
  };
  const data = (flowRowData?.content && JSON.parse(flowRowData?.content)) || [];

  return (
    <>
      {!localStorage.getItem('deviceType') && (
        <EmptyCenter description={'请先选择平台'} jump={true} />
      )}
      {localStorage.getItem('deviceType') && (
        <div ref={ref} style={flowListVisible ? { paddingLeft: '30%' } : null}>
          <EditorToolBar rest={rest} handleSave={handleSave} />
          <GGEditor className={classnames(styles.editor, rest.isFullscreen && styles.fullscreen)}>
            <Row type="flex" className={styles.editorHd}>
              <Col span={24}>
                <FlowToolbar />
              </Col>
            </Row>
            <Row type="flex" className={styles.editorBd}>
              {!flowListVisible && (
                <Col span={4} className={styles.editorSidebar}>
                  <FlowItemPanel />
                </Col>
              )}
              <Col span={flowListVisible ? 20 : 16} className={styles.editorContent}>
                <Flow
                  data={data}
                  graph={{ edgeDefaultShape: 'flow-polyline' }}
                  ref={flowRef}
                  className={styles.flow}
                />
                {/* <CustomNode /> */}
              </Col>
              <Col span={4} className={styles.editorSidebar}>
                <FlowDetailPanel />
                {!flowListVisible && <EditorMinimap />}
              </Col>
            </Row>
            <FlowContextMenu />
          </GGEditor>
          <ProcessListDrawer onChange={drawerChange} visible={flowListVisible} />
        </div>
      )}
    </>
  );
};
const EditorToolBar = Connect(state => {
  return {
    flowName: state.flowName,
  };
}, useModel)(({ flowName, rest, handleSave }) => {
  let toolbar = [
    {
      type: 'button',
      name: '保存',
      pos: 'right',
      htmlType: 'submit',
      theme: 'blue',
      icon: <IconFont type={'iconbaocun'} />,
      onClick: (e, form) => {
        const fields = form.getFieldsValue();
        handleSave(fields);
      },
    },
    // {
    //   type: 'button',
    //   name: '全屏',
    //   pos: 'right',
    //   htmlType: 'submit',
    //   theme: 'blue',
    //   icon: <IconFont type={'iconquanping'} />,
    //   onClick: (e, form) => {
    //     const { toggleFull } = rest;
    //     toggleFull();

    //   },
    // },
    {
      type: 'inputItem',
      id: 'flowName',
      className: styles['message-wrap'],
      name: '流程名称',
    },
  ];
  return (
    <Toolbar
      modules={toolbar}
      leftSpan={16}
      fields={{
        flowName,
      }}
      className={styles['toolbar-wrap']}
    />
  );
});

const ProcessListDrawer = ({ onChange, visible = false }) => {
  const [state, setState] = useState({ visible: false });
  useEffect(() => {
    setState({ visible });
  }, [visible]);
  useEffect(() => {
    onChange && onChange(state.visible);
  }, [state]);

  const showDrawer = () => {
    setState({
      visible: true,
    });
  };

  const onClose = () => {
    setState({
      visible: false,
    });
  };

  return (
    <Drawer
      title="流程列表"
      width={'30%'}
      placement="left"
      closable={false}
      onClose={onClose}
      className={styles['drawer-wrap']}
      visible={state.visible}
      getContainer={() => document.getElementById('main-wrap')}
      handler={
        <div
          className={classnames(styles['handle'])}
          onClick={() => setState({ visible: !state.visible })}
        >
          {state.visible ? <span>关闭流程列表</span> : <span>展开流程列表</span>}
        </div>
      }
      style={{
        zIndex: 999,
        position: 'absolute',
        left: '-20px',
      }}
    >
      <MessageList />
    </Drawer>
  );
};

export default EntryPage;

// class CustomNode extends React.Component {
//   render() {
//     const config = {
//       draw(item) {
//         const keyShape = this.drawKeyShape(item);

//         // 绘制图标
//         const group = item.getGraphicGroup();
//         const model = item.getModel();
//         group.addShape('image', {
//           attrs: {
//             x: -15,
//             y: -25,
//             width: 30,
//             height: 30,
//             img: model.icon,
//           },
//         });

//         // 绘制标签
//         this.drawLabel(item);

//         return keyShape;
//       },

//       anchor: [
//         [0.5, 0], // 上边中点
//         [0.5, 1], // 底边中点
//         [0, 0.5],
//         [1, 0.5],
//       ],
//     };

//     return <RegisterNode name="custom-node" config={config} />;
//   }
// }
// const data = {
//   nodes: [
//     {
//       type: 'node',
//       size: '100*100',
//       shape: 'custom-node',
//       color: '#FA8C16',
//       label: 'Ant Design',
//       labelOffsetY: 20,
//       icon: '//img.alicdn.com/tfs/TB1gXH2ywHqK1RjSZFPXXcwapXa-200-200.svg',
//       x: 100,
//       y: 100,
//       id: 'ea1184e8',
//       index: 0,
//     },
//     {
//       type: 'node',
//       size: '100*100',
//       shape: 'custom-node',
//       color: '#FA8C16',
//       label: 'React',
//       labelOffsetY: 20,
//       icon: '//img.alicdn.com/tfs/TB1OzAmyyLaK1RjSZFxXXamPFXa-200-200.svg',
//       x: 100,
//       y: 300,
//       id: '481fbb1a',
//       index: 2,
//     },
//   ],
//   edges: [
//     {
//       source: 'ea1184e8',
//       sourceAnchor: 1,
//       target: '481fbb1a',
//       targetAnchor: 0,
//       id: '7989ac70',
//       index: 1,
//     },
//   ],
// };
